<template>
  <div>
    <div id="head">
      <van-icon size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      工单详情
    </div>
    <div class="ticket-content">
      <div class="ticket-info">
          <span style="font-size: 14px;color: orange;position: absolute;top: 60px;right: 10px" v-if="detail.repairDegree==1"><b>紧急</b></span>
          <span style="font-size: 14px;color: red;position: absolute;top: 60px;right: 10px" v-if="detail.repairDegree==2"><b>特急</b></span>
          <span style="font-size: 14px;color: #1989fa;position: absolute;top: 60px;right: 10px" v-if="detail.repairDegree==3"><b>普通</b></span>
          <span style="font-size: 14px;color: #1989fa;position: absolute;top: 90px;right: 10px" v-if="detail.repairComplete==0"><b>已通过</b></span>
          <span style="font-size: 14px;color: #ee0a24;position: absolute;top: 90px;right: 10px" v-if="detail.repairComplete==2"><b>已驳回</b></span>
          <van-button id="button" type="info" size="small" v-if="detail.repairComplete==1&this.user.pid==1" @click="toConfirmation()">工单确认</van-button>
        <div class="ticket-header">工单编号：{{ detail.repairCode}}</div>
        <div class="ticket-header">工单类型：{{ detail.repairType }}</div>
        <div class="ticket-header">报 修 人 ：{{ detail.repairPeople }}</div>
        <div class="ticket-header">联系电话：{{ detail.peoplePhone }}</div>
        <div class="ticket-header">故障描述：{{ detail.repairReason }}</div>
        <div class="ticket-header" v-if="detail.repairComplete==0">
         评分： <van-rate v-model="detail.repairScore" :size="25" title="评分" color="#ffd21e" void-icon="star" void-color="#eee"/>
        </div>
        <div class="ticket-code" v-if="detail.repairComplete==0">
          评价：{{detail.repairEvaluate}}
        </div>
      </div>
    </div>
    <div id="device">
      <div>设备ID：{{detail.deviceCode}}</div>
      <div>设备名称：{{detail.deviceName}}</div>
      <div>设备位置：{{detail.deviceAddress}}</div>
    </div>
    <van-tabs v-model="activeTab" sticky>
      <van-tab title="生命周期">
        <van-steps direction="vertical" :active="0">
          <van-step>
            <h4>{{detail.lifeCycle}}</h4>
            <p>{{detail.repairTime}}</p>
          </van-step>
          <van-step>
            <h3>设备维修</h3>
            <p>2024-07-11 10:00</p>
          </van-step>
          <van-step>
            <h3>设备故障</h3>
            <p>2024-07-11 10:00</p>
          </van-step>
        </van-steps>
      </van-tab>
      <van-tab title="工单日志">
        <van-steps direction="vertical" :active="0">
          <van-step>
            <h3>{{detail.orderLog}}</h3>
            <p>{{detail.repairTime}}</p>
          </van-step>
          <van-step>
            <h3>正在维修</h3>
            <p>2024-07-11 10:00</p>
          </van-step>
          <van-step>
            <h3>已接单</h3>
            <p>2024-07-10 09:30</p>
          </van-step>
        </van-steps>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      isComplete:1,
      activeTab: 0,
      detail:{},
      id:"",
      value:0,
      aaa:{},
      user:{},
    }
  },
  methods:{
    toConfirmation(){
      this.$router.push({
        path:"/workConfirmation",
        query:{
          id:this.id
        }
      })
    },
    findById(){
      axios.post("http://localhost:9999/myModule-service/myRepair/findById?id="+this.id).then(res=>{
        this.detail = res.data;
      })
    },
    toHead(){
      this.$router.push('/myRepair')
    },
    findOne(){
      axios.post("http://localhost:9999/api-user-service/user/findById?id="+this.aaa.userId).then(res=>{
        this.user = res.data;
      })
    },
  },
  created(){
    this.id = this.$route.query.id;
    this.findById();
    this.aaa = JSON.parse(localStorage.getItem("aa"));
    this.findOne();
  }
}
</script>

<style scoped>
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 20px;
}
#device {
  width: 350px;
  height: 60px;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 12px;
  text-align: left;
  padding: 10px;
  box-shadow: 5px 5px 10px #888;
}
#button{
  position: absolute;
  top:130px;
  right: 10px;
}
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  color: #323233;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
}
.ticket-code{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #323233;
}
.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
  margin-left: 15px;
}
</style>
